<template>
  <div class="feedback-submit-modal">
    <div class="logo-tip">
      <div class="logo">
        <img src="@/assets/images/email-icon.png" alt="">
      </div>
      <div class="tip">
        <p>反馈＆建议</p>
        <span>提需求，提Bug！非常感谢您宝贵的建议~</span>
      </div>
    </div>
    <client-only>
      <div class="edit-markdown-block">
        <HeadAvatar
          :width="40"
          :height="40"
          :img="
            userInfo
              ? userInfo.avatar || 'https://image.zdxblog.cn/picture/16849805191921684980519192.png'
              : require('~/assets/images/default.svg')
          "
        />
        <div class="mavon-edit">
          <mavon-editor
            ref="feedbackmd"
            v-model="content"
            toolbars-background="#f6f8fa"
            :toolbars="toolbars"
            :tab-size="4"
            :subfield="false"
            placeholder="留下你宝贵的意见吧~"
            :box-shadow="false"
            :autofocus="true"
            :external-link="externalLink"
            previewBackground="#fff"
            code-style="github"
            @imgAdd="uploadImageServer"
          >
          </mavon-editor>
        </div>
        <div class="bottom-operate">
          <a-button
            :disabled="!content"
            type="primary"
            @click="submitFeedback"
            >{{ id ? '编辑' : '提交' }}反馈</a-button>
        </div>
      </div>
    </client-only>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  props: {
    userInfo: {
      default: null,
      type: Object
    },
    editContent: String,
    editId: String
  },

  data () {
    return {
      content: '',
      toolbars: {
        bold: true,
        italic: false,
        header: true,
        underline: true,
        mark: true,
        superscript: false,
        subscript: false,
        quote: true,
        ol: true,
        ul: true,
        link: true,
        imagelink: true,
        help: false,
        code: true,
        table: true,
        function: true,
        htmlcode: false,
        fullscreen: false,
        readmodel: false,
        undo: false,
        trash: false,
        save: false,
        navigation: false,
        preview: true
      },
      externalLink: {
        markdown_css: () => '/md/markdown/juejin-markdown.min.css',
        hljs_js: () => '/md/highlightjs/highlight.min.js',
        hljs_css: (css) => '/md/highlightjs/styles/' + css + '.min.css',
        hljs_lang: (lang) => '/md/highlightjs/languages/' + lang + '.min.js',
        katex_css: () => '/md/katex/katex.min.css',
        katex_js: () => '/md/katex/katex.min.js'
      },
      requestLoading: false,
      id: ''
    }
  },

  methods: {
    /**
     * user submit feedback
     */
    async submitFeedback () {
      if (!this.userInfo) {
        return this.$store.commit('UPDATE_LOGIN_VISIBLE', true)
      }
      if (this.requestLoading) return
      this.requestLoading = true
      try {
        const type = this.id ? 'update' : 'create'
        await this.$axios.post(`/gimishare/api/v1/feedbacks/${type}`, {
          content: this.content,
          html: this.$refs.feedbackmd.d_render,
          id: this.id
        })
        this.$message.success(this.id ? '更新反馈信息成功' : '提交反馈信息成功')
        this.id = ''
        this.content = ''
        this.$emit('success')
      } catch (error) {
        console.log(error)
      } finally {
        this.requestLoading = false
      }
    },

    uploadImageServer (pos, $file) {
      const formdata = new FormData()
      formdata.append('file', $file)
      axios({
        url: 'https://image.zdxblog.cn/upload/uploadFile',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' }
      })
        .then((data) => {
          this.$refs['feedback-md'].$img2Url(pos, data.data.data)
        })
        .catch(() => {
          this.$message.error('上传图片失败，请重新上传')
        })
    }
  },

  watch: {
    editContent (newVal) {
      if (newVal) {
        this.content = this.editContent
        this.id = this.editId
      }
    },
    editId (newVal) {
      if (newVal) {
        this.content = this.editContent
        this.id = this.editId
      }
    }
  }
}
</script>

<style lang="less" scoped>
.feedback-submit-modal {
  background: #fff;
  border-radius: 6px;
  padding: 30px;
  margin-bottom: 12px;
  .logo-tip {
    display: flex;
    align-items: center;
    .logo {
      padding: 12px;
      background: #ffd743;
      border-radius: 4px;
      img {
        display: block;
        height: 50px;
      }
    }
    .tip {
      margin-left: 20px;
      p {
        font-size: 18px;
        color: #000;
        font-weight: 600;
      }
      span {
        color: #999;
      }
    }
  }
  .edit-markdown-block {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    .mavon-edit {
      width: 0;
      flex: 1;
      margin-left: 20px;
      position: relative;
      ::v-deep .v-note-wrapper {
        border: 1px solid #d0d7de;
        min-height: 220px;
        z-index: 99 !important;
        .v-note-op {
          border-bottom: 1px solid #d0d7de;
        }
        .v-note-panel {
          .v-note-edit.divarea-wrapper.single-edit {
            max-height: 220px;
          }
        }
      }
      &:after {
        content: '';
        position: absolute;
        top: 11px;
        right: 100%;
        left: -7px;
        display: block;
        width: 8px;
        height: 16px;
        pointer-events: none;
        -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        background-color: #d0d7de;
      }
      &:before {
        content: '';
        position: absolute;
        top: 11px;
        right: 100%;
        left: -7px;
        display: block;
        width: 8px;
        height: 16px;
        pointer-events: none;
        -webkit-clip-path: polygon(0 50%, 100% 0, 100% 100%);
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        background-color: #f6f8fa;
        z-index: 100;
        margin-left: 1px;
      }
    }
    .bottom-operate {
      width: 100%;
      margin-top: 30px;
      text-align: right;
    }
  }
}
</style>
